<template>
	<view>
		<view class="x12" style="width: 100%;">
			<view class="u-m-20 u-p-20 bg-white radius">
				<view class="u-flex u-row-between list">
					<span class="u-flex-1">姓名 <span class="color-error u-p-l-10">*</span></span>
					<input class="u-flex-3" placeholder="填写当事人姓名" v-model="submit_data.realname" @input="xwatch()"/>
				</view>
				<view class="u-flex u-row-between list">
					<span class="u-flex-1">身份证号 <span class="color-error u-p-l-10">*</span></span>
					<input class="u-flex-3" placeholder="填写身份证号码" v-model="submit_data.idcard" @input="xwatch()"/>
				</view>
				<view class="u-flex u-row-between list">
					<span class="u-flex-1">手机号码 <span class="color-error u-p-l-10">*</span></span>
					<input class="u-flex-2" placeholder="填写当事人手机号码" v-model="submit_data.phone_number" @input="xwatch()"/>
					<u-button type="" @click="callphone" size="mini">测试拨打</u-button>
				</view>
				<view class="list u-flex u-row-between  u-p-t-24 u-p-b-24">
					<span class="">身份证照片 <span class="color-error u-p-l-10">*</span></span>
					<u-icon class="u-font-40" name="camera-fill" @click="chooseImages('idcard_imgurl')"></u-icon>
				</view>
				<view class="u-flex align-end" style="width:100%;padding: 20upx;margin:14upx 0;background: #FAFAFA;border-radius: 10upx;" v-if="submit_data.idcard_imgurl">
					<image class="x6" @click="previewfn([submit_data.idcard_imgurl],0)" :src="submit_data.idcard_imgurl" style="width: 100upx;height: 100upx;margin-right: 10upx;border-radius: 10upx;"></image>
				</view>
				<view class="u-flex u-row-between  u-p-t-24 u-p-b-24" v-if="submit_data.entity_report == 0">
					<span class="">征信报告 <span class="color-error u-p-l-10">*</span></span>
					<u-icon class="u-font-40" name="camera-fill" @click="chooseImages('report')"></u-icon>
				</view>
				<view class="u-flex align-end" style="width:100%;padding: 20upx;margin:14upx 0;background: #FAFAFA;border-radius: 10upx;" v-if="submit_data.entity_report == 0&&submit_data.report.length>0">
					<image class="x6" @click="previewfn(submit_data.report,sindex)" v-for="(sitme,sindex) in submit_data.report" :key="sindex" v-if="sindex<4" :src="sitme" style="width: 100upx;height: 100upx;margin-right: 10upx;border-radius: 10upx;"></image>
					<view @click="previewfn(submit_data.report,0)" class="" v-if="submit_data.report.length>4">...</view>
					<view @click="previewfn(submit_data.report,0)" class="x6 text-right" v-if="submit_data.report.length>4" style="font-size: 10pt; width: 100upx; color: #393D4A; padding-top:5upx;">共{{submit_data.report.length}}张</view>
				</view>
				<view class="u-flex u-row-between list">
					<span class="">已提供实体报告：</span>
					<u-switch v-model="submit_data.entity_report" @change="xswitch()"></u-switch>
				</view>
				<view class="u-flex u-m-t-30">
					<u-button class="" :type="isbtn?'default':'primary'" :disabled="isbtn" @click="subbtn()" style="width: 100%;">立即提交</u-button>
				</view>
			</view>
		</view>
		<kd-preview-image :images='preview_imgs' v-model="preview" :current="preview_index"></kd-preview-image> 
	</view>
</template>

<script>
	import ksjPreviewImage from 'components/kd-preview-image/kd-preview-image.vue';
	export default {
		components: {
			ksjPreviewImage
		},
		//#ifdef MP-WEIXIN
		onShareAppMessage(res) { //分享
			try { //从本地缓存中同步获取指定 key 对应的内容。
				var mv = uni.getStorageSync('memberinfo');
				var xv = uni.getStorageSync('xshopInfo');
				if (res.from === 'button') { // 来自页面内分享按钮
					console.log(res.target)
				}
				return {
					title: xv.store.stores_name,
					path: '/pages/home/index?member_openid=' + mv.openid + "&stores_id=" + xv.store.stores_id
				}
			} catch (e) {
				// error
			}

		},
		//#endif
		data() {
			return {
				url: this.$u.http.config.baseUrl,
				submit_data:{
					realname:'',//公司名称
					phone_number:'',//信用代码
					idcard:'',
					idcard_imgurl:'',
					entity_report:0,
					report:[],
					d:{g:1}
				},
				preview:false,
				preview_imgs:[],
				preview_index:0,
				isbtn:true,//按钮状态
			}
		},
		onLoad: function(e) {
			const value = uni.getStorageSync('userinfo');
			this.submit_data.user_id = value['_id'];
		},
		methods: {
			previewfn(imgs,index){
				this.preview_imgs=imgs;
				this.preview_index = index;
				this.preview=true
			},
			xswitch(){
				if(this.submit_data.entity_report){
					this.submit_data.entity_report = 1;
					this.submit_data.report = [];
				}else this.submit_data.entity_report = 0;
				this.xwatch();
			},
			//申请
			subbtn(){
				var res = this.verify();
				if(res==1){
					console.log(this.submit_data);
					this.$u.api.addOrder(this.submit_data).then(res=>{
						uni.showToast({
							title:'提交成功',
							icon:'success'
						})
						setTimeout(()=>{
							uni.navigateTo({
								url:'./addsuccess'
							})
						},1000);
					})
				}
			},
			xwatch(){
				if(this.submit_data.realname!=''&&this.submit_data.phone_number!=''&&this.submit_data.idcard!=''&&this.submit_data.idcard_imgurl!=''){
					if(this.submit_data.entity_report==1)this.isbtn = false;
					else{
						if(this.submit_data.report!='')this.isbtn = false;
						else{
							this.isbtn = true;
						}
					}
				}else{
					this.isbtn = true;
				}
			},
			verify(){	
				//验证
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.submit_data.phone_number))){
					uni.showToast({
						title:'手机号码格式不正确',
						icon:'none',
						duration:1000
					})
					return 0;
				}
				return 1
			},
			uploadImages(action,tempFilePaths){
				if(tempFilePaths.length<=0){
					uni.showToast({
						title:'上传完成',
						icon:'none',
						duration:1000
					})
					return false;
				}
				var _this = this;
				uni.uploadFile({
					url: this.url + '/api/imgupload/index',
					filePath: tempFilePaths[0],
					name: 'file',
					formData: {},
					success: (uploadFileRes) => {
						var res = JSON.parse(uploadFileRes.data)
						if (res.code == 1) {
							if(action == 'idcard_imgurl'){
								this.submit_data.idcard_imgurl = res.data;
							}else if(action == 'report'){
								this.submit_data.report.push(res.data);
							}
							tempFilePaths.shift();
							_this.xwatch();
							_this.uploadImages(action,tempFilePaths)
						}else{
							var msg = res.msg.replace(/<\/?.+?>/g,"");
							var title = msg.replace(/ /g,"");
							uni.showToast({
								title:title,
								icon:'none',
								duration:1000
							})
						}
					}
				});
			},
			//选择图片
			chooseImages(action) {
				var _this = this;
				uni.chooseImage({
					count:action=="report"?9:1,
					success: (chooseImageRes) => {
						var tempFilePaths = chooseImageRes.tempFilePaths;
						if(tempFilePaths.length>0){
							uni.showLoading({
								title:'上传中...',
							})
							_this.uploadImages(action,tempFilePaths)
						}
					}
				});
			},
			callphone(){
				var _this = this;
				if(_this.submit_data.phone_number==''){
					uni.showToast({
						title:'请填写手机号码',
						icon:'none',
						duration:1000
					})
					return false;
				}
				uni.makePhoneCall({
				    phoneNumber: _this.submit_data.phone_number //仅为示例
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		padding: 24upx 0;
		border-bottom: 1upx solid #f6f6f6;
	}
	.color-error {
		color: $u-type-error;
	}
	.color-theme {
		color: $u-type-primary;
	}
</style>
